


A Star Wars: The Old Republic datapad work skin

by CellarSpider



Category: No Fandom
Language: English
Status: Completed
Published: 2019-07-20
Updated: 2019-07-20
Packaged: 2020-07-09 09:13:36
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,259
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/19885192
Author URL: https://archiveofourown.org/users/CellarSpider/pseuds/CellarSpider
Summary: Like it says on the tin.





	A Star Wars: The Old Republic datapad work skin

Datapad Work Skin  
This work skin was put together to emulate certain aspects of the SWTOR interface, while also providing some functions I require for a fic. I will be posting some journal/report-style works, including one for my Agent character. He is paranoid, and keeps multiple levels of encrypted notes: one encryption for general reports,  


And one for his more honest commentary on events.  
While on another platform I might be able to hide his commentary with `<details>` and `<summary>` HTML tags, that is not possible on AO3. Therefore, they are stylistically rendered in block quotes and a different font to indicate a shift to greater secretiveness and less formality.

The Agent's notes are extremely detailed and highly structured. For ease of reading, in-page links provide navigation to and from different sections, such as target profiles, his to-do lists, and research he's done on a target, location, or culture. These links should be navigable both on desktop and on mobile.  
  
This skin makes use of style elements taken from an examination of the [Jedipedia codex pages](https://swtor.jedipedia.net/en/cdx/ilum-landing-zone), and La_Temperanza and CodenameCarrot's [AO3 Work Skins/Tutorials](https://archiveofourown.org/series/458134) series. Aspects adapted from their work include image resizing for mobile and small desktop windows, text wrapping, and linked footnotes. The rest is either adapted from Jedipedia or confusedly kludged together with my limited CSS skills.  
This is literally the first CSS sheet I've ever worked on. Please have mercy.

Profile  
  
---  
Alias: | The Doge  
Occupation: | Meme  
Assessment: | We all know the meme. I'm not going to do it. I'm just using this to test how the table formatting works when I put in a larger amount of text.  
Cited: | Paragraph 3  
  
There are a number of different inset text box options in this work skin that function with wrapped text. This one on the right is `<div class="box_floatr">`, but there's also `box_floatl` and `box_full`, which is shown below. All of these scale to fit window space, as do the images (see [How To Make Images Fit In Mobile Browsers](https://archiveofourown.org/works/15768186) by La_Temperanza for more details). This means the text should remain relatively readable on mobile, but I have more optimization to do for this. Be aware, at this time the box_full option will expand to fill space up to the last line of text outside of another box, which may cause unsightly overlap. I'm going to work on tweaking that.  
  
There are a couple tweaks to table aesthetics `` and `` to provide a dotted divider and more consistent text spacing. Elsewhere throughout this document, custom `ws_h1`, `ws_h2`, and `ws_h3` `<span>` and `<div>` classes provide headings within the text, so as not to alter the rest of the page.  
  
In future, I intend to add in a few graphical whizzbangs, including altering the behavior of floating boxes on small screens, sprucing up the tables a bit more, more text box visual styles, and greater fidelity to the Star Wars look. 

That's all for now. Please give me feedback on this work skin, I'm just starting to learn CSS and I'd appreciate advice from more knowledgeable coders!

Revenge of the Doge  
  
---  
Alias: | also Shibe  
Occupation: | still meme  
Assessment: | One of the issues with this table structure is that the right column starts having to split words between lines once the horizontal restriction gets extreme. While it should function as intended on most mobile screens and most browsers should see word splits with hyphenation, some smaller ones might have trouble!  
Cited: | Paragraph 5  
  
`#workskin .ws_h1 {`  
` color: #f5c413;`  
` font-family: "Arial Black", Arial Bold, Impact, sans-serif;`  
` font-size: 28pt;`  
` font-weight: bold;`  
` margin: 5px 0;`  
` padding: 2px 5px;`  
` text-shadow: 0 0 5px #B2971B;`  
`}`  
`#workskin .ws_h2 {`  
` font-family: "Arial Black", Arial Bold, Impact, sans-serif;`  
` font-size: 26pt;`  
` font-weight: bold;`  
` color: #f5c413;`  
` letter-spacing: 2px;`  
` text-shadow: 0 0 5px #6F6A23;`  
`}`  
`#workskin .ws_h3 {`  
` font-family: "Arial Black", Arial Bold, Impact, sans-serif;`  
` margin: 8px 0px;`  
` font-size: 22pt;`  
` font-weight: bold;`  
` color: #f5c413;`  
` letter-spacing: 2px;`  
` border-style: hidden hidden double hidden;`  
` border-color: #f5c413;`  
` text-shadow: 0 0 5px #6F6A23;`  
`}`  
`#workskin .tab {`  
` margin-left: 2em;`  
` margin-top: -10px;`  
`}`  
`#workskin .ws_a {`  
` color: #f5c413;`  
`}`  
`#workskin .ws_a:hover {`  
` border-color: yellow;`  
` color: yellow;`  
` text-shadow: 0 0 15px #f5c413;`  
`}`  
`#workskin .ws_a:focus {`  
` border-color: yellow;`  
` color: yellow;`  
` text-shadow: 0 0 15px #f5c413;`  
`}`  
`#workskin .entry {`  
` -webkit-box-shadow: inset 0 0 78px 70px #000f21;`  
` box-shadow: inset 0 0 78px 70px #000f21;`  
` border: 3px solid #51a5bc;`  
` border-radius: 15px;`  
` padding: 10px 15px;`  
` background: linear-gradient(to bottom,#001f31,#001f31,#012335,#03263A,#012335,#001f31,#001f31);`  
` margin: 10px auto;`  
` background-size: 100% 20px;`  
` position: relative;`  
` overflow: hidden;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 17px;`  
` line-height: 24px;`  
` color: #43c4ef;`  
` text-shadow: 0 0 5px #43c4ef;`  
`}`  
`#workskin .entry_lowglow {`  
` -webkit-box-shadow: inset 0 0 78px 70px #000f21;`  
` box-shadow: inset 0 0 78px 70px #000f21;`  
` border: 3px solid #51a5bc;`  
` border-radius: 15px;`  
` padding: 10px 15px;`  
` background: linear-gradient(to bottom,#001f31,#001f31,#012335,#03263A,#012335,#001f31,#001f31);`  
` margin: 10px auto;`  
` background-size: 100% 20px;`  
` position: relative;`  
` overflow: hidden;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 17px;`  
` line-height: 24px;`  
` color: #43c4ef;`  
` text-shadow: 0 0 5px #03263A;`  
`}`  
`#workskin .entry_noglow {`  
` -webkit-box-shadow: inset 0 0 78px 70px #000f21;`  
` box-shadow: inset 0 0 78px 70px #000f21;`  
` border: 3px solid #51a5bc;`  
` border-radius: 15px;`  
` padding: 10px 15px;`  
` background: linear-gradient(to bottom,#001f31,#001f31,#012335,#03263A,#012335,#001f31,#001f31);`  
` margin: 10px auto;`  
` background-size: 100% 20px;`  
` position: relative;`  
` overflow: hidden;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 17px;`  
` line-height: 24px;`  
` color: #43c4ef;`  
`}`  
`#workskin .commentary {`  
` -webkit-box-shadow: inset 0px 0px 78px 15px #000f21, 0px 0px 78px 15px #000f21;`  
` box-shadow: inset 0px 0px 78px 15px #000f21, 0px 0px 78px 15px #000f21;`  
` cursor: help;`  
` font-family: "Tahoma", "Trebuchet MS", "Veranda", "Helvetica", monospace;`  
` padding-left: 1em;`  
` margin-top: -10px;`  
` color: #43c4ef;`  
` border-left-width: .25em;`  
` border-left-style: dotted;`  
` border-color: #51a5bc;`  
` text-shadow: 0 0 5px #000;`  
`}`  
`#workskin .mobileimage {`  
` width: 700px;`  
` max-width: 100%;`  
` border-style: solid;`  
` border-width: .25em;`  
` border-radius: 15px;`  
` border-color: #51a5bc;`  
`}`  
`#workskin .mobileimage2 {`  
` width: 456px;`  
` max-width: 100%;`  
` border-style: solid;`  
` border-width: .25em;`  
` border-top-left-radius: 15px;`  
` border-top-right-radius: 15px;`  
` border-color: #51a5bc;`  
`}`  
`#workskin .mobileimage2_floatl {`  
` width: 456px;`  
` max-width: 50%;`  
` border-style: solid;`  
` border-width: .25em;`  
` border-top-right-radius: 15px;`  
` border-bottom-right-radius: 15px;`  
` border-color: #51a5bc;`  
` float: center;`  
` margin-left: -10px;`  
`}`  
`#workskin .mobileimage2_floatr {`  
` width: 456px;`  
` max-width: 50%;`  
` border-style: solid;`  
` border-width: .25em;`  
` border-top-right-radius: 15px;`  
` border-bottom-right-radius: 15px;`  
` border-color: #51a5bc;`  
` float: center;`  
` margin-left: -5px;`  
`}`  
`#workskin .mobileimage2_maxwidth {`  
` width: 456px;`  
` max-width: 103%;`  
` border-style: solid;`  
` border-width: .25em;`  
` border-top-left-radius: 15px;`  
` border-top-right-radius: 15px;`  
` border-color: #51a5bc;`  
` float: center;`  
` margin-left: -0.5em;`  
` margin-right: -0.5em;`  
`}`  
`#workskin .box_floatr {`  
` width: 456px;`  
` max-width: 50%;`  
` float: right;`  
` margin-top: 0em;`  
` margin-right: -.5em;`  
` margin-bottom: .5em;`  
` margin-left: .5em;`  
` border-style: solid;`  
` border-radius: 15px;`  
` border-width: .25em;`  
` border-color: #51a5bc;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 15px;`  
` line-height: 20px;`  
` color: #43c4ef;`  
` min-width: 175px;`  
` overflow: hidden;`  
` -ms-word-break: break-all;`  
` word-break: break-word;`  
` -webkit-hyphens: auto;`  
` -ms-hyphens: auto;`  
` hyphens: auto;`  
`}`  
`#workskin .box_floatl {`  
` width: 456px;`  
` max-width: 50%;`  
` float: left;`  
` margin-top: 0em;`  
` margin-right: .5em;`  
` margin-bottom: .5em;`  
` margin-left: -.5em;`  
` border-style: solid;`  
` border-radius: 15px;`  
` border-width: .25em;`  
` border-color: #51a5bc;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 15px;`  
` line-height: 20px;`  
` color: #43c4ef;`  
` min-width: 175px;`  
` overflow: hidden;`  
` -ms-word-break: break-all;`  
` word-break: break-word;`  
` -webkit-hyphens: auto;`  
` -ms-hyphens: auto;`  
` hyphens: auto;`  
`}`  
`#workskin .box_full {`  
` width: 2000px;`  
` max-width: 100%;`  
` float: center;`  
` margin-top: .5em;`  
` margin-right: 1em;`  
` margin-bottom: .5em;`  
` margin-left: .5em;`  
` border-style: solid;`  
` border-radius: 15px;`  
` border-width: .25em;`  
` border-color: #51a5bc;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 15px;`  
` line-height: 20px;`  
` color: #43c4ef;`  
`}`  
`#workskin table td:first-child {`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` font-size: 15px;`  
` min-width: 80px;`  
` overflow: hidden;`  
` border-right: 1px dashed #51a5bc;`  
` padding-top: 0;`  
`}`  
`#workskin table td:last-child {`  
` padding-left: 8px;`  
` border-color: #51a5bc;`  
` font-family: "Lucida Console", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Monaco, monospace;`  
` color: #43c4ef;`  
` text-shadow: 0 0 5px #000;`  
` -ms-word-break: break-all;`  
` word-break: break-word;`  
` -webkit-hyphens: auto;`  
` -ms-hyphens: auto;`  
` hyphens: auto;`  
`}`  
`#workskin .hide {`  
` display: none;`  
`}`  



End file.
